<template>
  <view class="goods-like">

    <view class="goods">
      <u-row gutter="16">
        <u-col span="6" v-for="(item, index) in list" :key="index">
          <navigator  hover-class="none"
                     :url="'/pages/goods_details/goods_details?id=' + item.id" class="goods-item">
            <view :class="[ 'br10', index === 0 ? 'gradient-blue' : index === 1 ? 'gradient-orange' : '']">
              <view class="category-header">
                <text class="cat-name">{{ item.cat_name }}</text>
                <u-icon name="arrow-right" size="28"></u-icon>
              </view>
              <view class="image-container">
                <custom-image width="286rpx" height="155rpx" radius="32rpx" lazy-load :src="item.image">
                </custom-image>
              </view>
              <view class="goods-info">
                <view class="goods-name line1">{{ item.name }}</view>
                <view class="price">
                  <price-format color="#ff312c" :subscript-size="28" :second-size="28" :price="item.price"
                                :weight="700"></price-format>

                </view>
                <view class="info-remark">
                  {{ item.remark }}
                </view>
                <view class="text-btn">{{ item.sales_sum }}人购买</view>
              </view>
            </view>
          </navigator>
        </u-col>
      </u-row>
    </view>
    <!--			<scroll-view style="height: 340rpx; white-space: nowrap;" scroll-x="true" scroll-with-animation="true"-->
    <!--				@scroll="scrollBarChange">-->
    <!--				<navigator v-for="(item, index) in list" :key="index" hover-class="none"-->
    <!--					:url="'/pages/goods_details/goods_details?id=' + item.id" class="goods-item">-->
    <!--					<custom-image width="286rpx" height="155rpx" radius="10rpx" lazy-load :src="item.image">-->
    <!--					</custom-image>-->
    <!--					<view class="goods-name line1 mt10">{{item.name}}</view>-->
    <!--					<view class="price">-->
    <!--						<price-format color="#FF2C3C" :subscript-size="22" :second-size="22" :price="item.price"-->
    <!--							:weight="500"></price-format>-->

    <!--					</view>-->
    <!--          <view class="row">-->
    <!--            {{item.remark}}-->
    <!--          </view>-->
    <!--          <text >{{item.sales_sum}}人购买</text>-->
    <!--				</navigator>-->
    <!--			</scroll-view>-->
    <view class="row-center mb10 mt20" v-if="list.length > 3">
      <cu-progress progressBarColor="#FF2C3C" :left="progressPer"></cu-progress>
    </view>
  </view>
  </view>
</template>

<script>
import {
  getRect
} from '@/utils/tools';

export default {
  data() {
    return {
      progressPer: 0
    };
  },

  components: {},
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    list: {
      handler: function () {
        this.$nextTick(function () {
          getRect(".goods-like", false, this).then(res => {
            this.rectWidth = res.width;
          });
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    scrollBarChange(e) {
      let {
        progressPer
      } = this;
      let {
        scrollLeft,
        scrollWidth
      } = e.detail;
      progressPer = scrollLeft / (scrollWidth - this.rectWidth) * 100;
      progressPer = Number(progressPer.toFixed(0))
      this.progressPer = progressPer
    }
  }
};
</script>
<style lang="scss">
.goods-like .title {
  height: 100rpx;
  padding: 0 20rpx;
}

.goods-like .title .line {
  width: 58rpx;
  height: 1px;
  background-color: #ccc;
  margin: 0 22rpx;
}

.goods-like .title image {
  width: 38rpx;
  height: 38rpx;
}

.goods-like .title .like {
  padding: 1rpx 11rpx;
  background: linear-gradient(180deg, rgba(255, 44, 60, 1) 0%, rgba(249, 95, 47, 1) 100%);
  border-radius: 100px 100px 100px 0px;
}

.goods-like .goods {
  padding-bottom: 10rpx;
}

.goods-like .goods .goods-item {
  width: 334rpx;
  display: inline-block;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}


.gradient-blue {
  background: linear-gradient(to bottom, #e9f2ff, #ffffff);
}

.gradient-orange {
  background: linear-gradient(to bottom, #ffebd9, #ffffff);
}

.goods-item {
  width: 334rpx;
  display: inline-block;
  border-radius: 16rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  overflow: hidden; // 防止内容溢出
}

.goods-item-image {
  width: 286rpx;
  height: 155rpx;
  border-radius: 10rpx;
  margin: 0 auto;
}

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 25rpx;

}

.cat-name {
  font-family: "youshebiaotihei";
  font-size: 32rpx;
  font-weight: 900;
  font-style: italic;
}

.gradient-blue .cat-name {
  color: #3793ff;
}

.gradient-orange .cat-name {
  color: #f34202;
}

.goods-info {
  padding: 10rpx 30rpx;
}

.text-btn {
  background: #fff1f0;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  color: #f9571d;
  font-size: 20rpx;
  display: inline-block;
}

.info-remark {
  color: #878997;
  font-size: 24rpx;
  margin-bottom: 10rpx;
  height: 30rpx;
  overflow: hidden;
}

.goods-name {
  font-size: 32rpx;
  font-weight: bold;
}
</style>
